<template>
  <div class="restaurant-detail">
    <el-card>
      <div class="intro-and-image">
        <img :src="restaurant.image" class="restaurant-image" />
        <div class="restaurant-intro">
          <h3>餐厅介绍</h3>
          <p>分类：餐厅（Canteen）</p>
          <p>出处：卡通片《海绵宝宝》（Spongebob Square Pants）</p>
          <p>所有者：蟹老板（Eugene H. Krabs）</p>
          <p>员工：章鱼哥（Squidward），海绵宝宝（Spongebob）</p>
          <p>前员工：詹姆（已离开）</p>
          <p>临时工：珍珍、派大星、凯伦（被痞老板抛弃后曾短暂投靠蟹堡王）</p>
          <p>贩售：主要贩卖蟹黄堡（汉堡，一般由海绵宝宝制作）和一些小食、饮料。</p>
          <p>非常经历：众所周知，蟹老板是个极度十分贪恋钱的家伙。他出外游历发现大饭店很赚钱，于是归来后把蟹堡王改造成高级饭店，成为蟹堡王大饭店。但后来垮塌了，又成为了原来的蟹堡王。</p>
        </div>
      </div>
      <div class="restaurant-info">
        <h2>{{ restaurant.name }}</h2>
        <el-rate v-model="restaurant.rating" :disabled="true" void-color="#c6c6c6" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
        <span class="rating-count">({{ restaurant.reviews.length }} 评价)</span>
        <el-divider></el-divider>
        <div class="reviews">
          <div v-for="(review, index) in restaurant.reviews" :key="index" class="review-item">
            <p><strong>{{ review.user }}</strong> 评分: <el-rate v-model="review.rating" :disabled="true" void-color="#c6c6c6" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate> {{ review.content }}</p>
          </div>
        </div>
        <div class="dishes">
          <el-row :gutter="20">
            <el-col :span="12" v-for="dish in restaurant.dishes" :key="dish.name">
              <el-card class="dish-card">
                <img :src="dish.image" class="dish-image" />
                <div class="dish-info">
                  <h4>{{ dish.name }}</h4>
                  <p>￥{{ dish.price }}</p>
                  <p>{{ dish.description }}</p> <!-- 显示菜品介绍 -->
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      restaurant: {
        name: '蟹堡王',
        image: 'src/assets/BurgerRestaurant.png',
        rating: 4.5,
        dishes: [
          { name: '蟹黄堡', price: 30, image: 'src/assets/hamburger.png', description: '美味的蟹黄堡，由海绵宝宝精心制作。' },
          { name: '薯条', price: 15, image: 'src/assets/chips.jpg', description: '金黄酥脆的薯条，搭配番茄酱更加美味。' },
          { name: '蛋糕', price: 30, image: 'src/assets/cake.jpg', description: '松软可口的蛋糕，适合下午茶时光。' },
          { name: '番茄排骨', price: 15, image: 'src/assets/meat.jpg', description: '酸甜的番茄排骨，肉质鲜嫩多汁。' },
          // 更多菜品...
        ],
        reviews: [
          { user: '派大星', rating: 5, content: '真的非常好吃！我全部吃完了！' },
          { user: '痞老板', rating: 2, content: '都挺难吃的，建议大家去吃海之霸的海霸棒。' },
          // 更多评价...
        ]
      }
    }
  }
}
</script>

<style scoped>
.intro-and-image {
  display: flex;
}
.restaurant-intro {
  padding: 10px;
  width:35%;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ebeef5;
}
.restaurant-image {
  width: 60%;
  height: 600px;
  object-fit: contain;
}
.dish-card {
  margin-bottom: 10px;
}
.dish-image {
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.rating-count {
  margin-left: 100px;
  color: #888;
}
.review-item {
  margin-bottom:0px;
}
.dish-card {
  margin-bottom: 10px;
  height: 370px;
}
/* 调整h2标签的字体大小 */
h2 {
  font-size: 40px;
  margin-bottom: 10px;
}

h3 {
  font-size: 20px;
}

/* 调整所有p标签的字体大小 */
p {
  font-size: 19px; /* 或者其他你想要的尺寸 */
}
.dish-info h4 {
  font-size: 28px; /* 菜品名称的字体大小 */
  margin-bottom: -10px;
}

.dish-info p {
  font-size: 24px; /* 菜品描述和价格的字体大小 */
  margin-bottom: -10px;
}

</style>